<template>
	<view style="position: relative;height: 100vh;width: 100%;">
		<template v-if="paginate.total">
			<swiper v-for="(item,index) in paginate.data" :key="index" class="swiper" vertical  >
				<swiper-item class="item">
					<view class="align-center justify-center">
						<video :src="baseURL+'/'+item.video_url" :controls="false" style="width: 100%;"></video>
					</view>
				</swiper-item>
			</swiper>
		</template>
		
		<PayConfirm ref="pay-confirm"></PayConfirm>
		<OperaCollection ref="OperaCollection" :operaId="opera_id" :operaCollectionId="operaCollectionId"></OperaCollection>
	</view>
</template>

<script>
	import PayConfirm from '@/pages/opera/components/PayConfirm.vue'
	import OperaCollection from '@/pages/opera/components/OperaCollection.vue'
	export default {
		components:{
			PayConfirm,
			OperaCollection,
		},
		data() {
			return {
				baseURL:this.baseURL,
				opera_id: 0,
				operaCollectionId: 0,
				operaInfo: null,
				paginate: null,
			}
		},
		onLoad(e) {
			this.opera_id=e.opera_id
			this.getData()
		},
		methods: {
			getData(){
				this.get('crud/detail',{table:'opera', table_id:this.opera_id}).then(({code,detail})=>{
					if(code==1){
						this.operaInfo=detail
					}
				});
				this.get('crud/list',{table:'opera_collection', opera_id:this.opera_id}).then(({code,paginate})=>{
					if(code==1){
						this.paginate=paginate
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.swiper{
	height: 100%;
}
</style>
